import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
// useSelector的作用: 帮我们监听redux数据的变化,并且过滤数据
// useDispatch的作用: 返回store.dispatch函数

import { add, sub, addAsync } from './redux/actions'
export default function Count() {
  // 返回值就是回调中返回的数据
  const count = useSelector((state) => {
    return state.zs.count
  })
  const dispatch = useDispatch()
  return (
    <div>
      count
      <hr />
      <p>{count}</p>
      <button
        onClick={() => {
          dispatch(add(6))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(sub(4))
        }}
      >
        -
      </button>
      <button
        onClick={() => {
          dispatch(addAsync(3))
        }}
      >
        async +
      </button>
    </div>
  )
}
